<script>
//组件工具栏
import { mapGetters } from 'vuex';
import DeleteCard from './DeleteCard.js';
export default {
  name: 'OverLapToolbar',
  mixins: [DeleteCard],
  computed: {
    ...mapGetters(['controls', 'currentId']),
    control() {
      return this.controls[this.currentId];
    },
  },
  methods: {
    cardEdit() {
      let type = this.control.appearance.type;
      if (type === 'overlapMap') {
        this.$router.push('/workspace/overlapmapedit/' + this.$store.getters.currentId);
      }
      this.$nextTick(() => {
        this.$events.emit('on-intoEdit', true);
      });
    },
    selectAct(name) {
      const state = {
        exportImg() {},
        exportExcel() {},
        copyImgText() {},
        linkageSet() {},
        gotoSet() {},
        delete() {
          this.deleteCard();
        },
      };
      state[name].call(this);
    },
  },
};
</script>
<template>
  <div class="cardtoolbar">
    <Icon
      type="edit"
      title="编辑"
      @click.native.stop="cardEdit" />
    <Icon
      type="android-expand"
      title="全屏" />
    <Dropdown
      transfer
      @on-click="selectAct">
      <Icon
        type="android-more-vertical"
        title="更多" />
      <DropdownMenu slot="list">
        <DropdownItem name="exportImg">导出图片</DropdownItem>
        <DropdownItem name="exportExcel">导出EXcel</DropdownItem>
        <DropdownItem name="copyImgText">复制图表</DropdownItem>
        <DropdownItem name="linkageSet">联动设置</DropdownItem>
        <DropdownItem name="gotoSet">跳转设置</DropdownItem>
        <DropdownItem name="delete">删除</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>


<style lang="less" scoped>
.cardtoolbar {
  position: absolute;
  top: 5px;
  right: 12px;
  z-index: 900;
  cursor: default;
  .k-icon {
    color: #666666;
    font-size: 18px;
    margin: 0 5px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .k-icon-arrow-swap {
    transform: rotate(90deg);
  }
}
</style>
